<template>
  <div>
    <view class="item-wrap" v-for="(y, index3) in state.list" :key="index3">
      <template>
        <view
          class="n-r-item h-240rpx p-20rpx flex justify-items-start b-b-1 b-b-cyan"
          @tap="toProductView(y.id)"
        >
          <view class="imgbox w-24% mr-20rpx h-100%">
            <img class="thumbnail w-100% h-100%" :src="handleUnitImg(y)" mode="aspectFit" />
          </view>
          <view class="intro">
            <view class="caption lineText2">
              <label class="label" v-if="y.activityTitle">{{ y.activityTitle }}</label>
              <label class="label" v-if="y.activitySubTitle">{{ y.activitySubTitle }}</label>
              <text>{{ y.title || '' }}</text>
            </view>
            <view class="ext-label" v-if="y.haveCoupon && y.couponTitles.length > 0">
              <view class="ext-label-item">
                <text class="before"></text>
                <text>{{ y.couponTitles[0] }}</text>
                <text class="after"></text>
              </view>
            </view>
            <view class="price" v-if="y.price">
              <span class="price"> ￥{{ y.promotionPrice || y.vipPrice || '' }} </span>
              <span class="ori-price">￥{{ y.price || '' }}</span>
            </view>
          </view>
        </view>
      </template>
    </view>
  </div>
</template>
<script lang="ts" setup>
  import { PATH_COLLECTIONS } from '@/enums/routerEnum';
  import { getProductClassify, productsByCateId } from '@/services/api/products/products';
  import { router } from '@/utils/router';

  const state = reactive({
    categoryId: null,
    queryData: { pageSize: 20, pageIndex: 1 },
    total: 0,
    list: [],
  });
  onLoad((options) => {
    if (options) {
      state.categoryId = options.categoryId;
    }
  });
  onMounted(() => {
    initDatas();
  });
  onReachBottom(() => {
    if (state.total < state.queryData.pageIndex * state.queryData.pageSize) return;
    state.queryData.pageIndex++;
    initDatas();
  });
  const toProductView = (e) => {
    router.push(PATH_COLLECTIONS.PRODUCTVIEW + `?id=${e}`);
  };
  const initDatas = () => {
    productsByCateId({ id: state.categoryId, ...state.queryData }).then((result) => {
      state.list = state.list.concat(result.data.list);
      state.total = result.data.total;
    });
  };
  const handleUnitImg = (row: any) => {
    if (!row.img_url) return '';
    return row.img_url.split(',')[0];
  };
</script>

<style lang="scss" scoped></style>
